<template>
    <Modal v-model="modal.show" :title="modal.title" :loading="modal.loading" @on-ok="createdProSubmit('formValidate')">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="名称" prop="name">
                <Input v-model.trim="formValidate.name" placeholder="名称" @keydown.native.enter.prevent="searchHandle"></Input>
            </FormItem>
            <FormItem label="描述" prop="description">
                <Input v-model.trim="formValidate.description" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述"></Input>
            </FormItem>
            <FormItem label="支持分布式" prop="type" v-if="distributedRange && $store.state.common.showDistributed">
                <RadioGroup v-model="formValidate.type">
                    <Radio label="distributed">是</Radio>
                    <Radio label="normal">否</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem FormItem label="模式" prop="mode">
                <RadioGroup v-model="formValidate.mode" type="button" >
                    <Poptip trigger="hover" title="完全导入" content="导入模板所有信息">
                        <Radio label="complete">完全导入</Radio>
                    </Poptip>
                    <Poptip trigger="hover" title="强制导入" content="自动替换已丢失的镜像和配额">
                        <Radio label="force">强制导入</Radio>
                    </Poptip>
                    <Poptip trigger="hover" title="仅拓扑结构" content="仅导入拓扑结构，不导入节点配置">
                        <Radio label="only_structure">仅拓扑结构</Radio>
                    </Poptip>
                </RadioGroup>
            </FormItem>
        </Form>
    </Modal>
</template>
<script>
    import {creatBlankPro} from '@/api/homer.js'
    import { validateName1 } from '@/libs/reg.js'
    export default {
        name:'creatProject',
        props:[],
        data () {
            return {
                templateId:'',
                modal:{
                    show:false,
                    title:'创建工程',
                    loading:true
                },
                // 普通工程创建
                formValidate:{
                    name:'',
                    description:'',
                    trainId:'0',
                    type:'normal',
                    mode:'complete',
                },
                ruleValidate:{
                    name:[
                        { required: true, max: 64,message: '工程名称长度为1-64个字符', trigger: 'change' },
                        { validator: validateName1, trigger: 'change' }
                    ],
                    description:[
                        { max: 200, message: '描述文字不能超过200个字符', trigger: 'change' },
                    ]
                }
            }
        },
        created(){
            this._formValidate = {...this.formValidate}
        },
        mounted(){

        },
        computed:{
            distributedRange(){
                return this.$store.state.user.distributedRange
            }
        },
        methods:{
            // 阻止回车键导致的刷新
            searchHandle(){

            },
            openModal(template){
                this.modal.show = true;
                this.templateId = template.id;
                this.$refs.formValidate.resetFields();
                this.formValidate = {...this._formValidate};
            },
            // 创建新工程
            createdProSubmit(name){
                if(!this.templateId){
                    this.cancelLoading()
                    return 
                }
                this.$refs[name].validate((valid) =>{
                    if(valid){
                        creatBlankPro(this.templateId,this.formValidate,this.formValidate.mode)
                            .then(res=>{
                                let resultData = res.data.attribute?res.data.attribute.result:''
                                if(res.data.code === 1){
                                    if(resultData.status === 0){
                                        this.$Message.success('工程创建成功！')
                                    }
                                    this.templateId = ''
                                    this.modal.show = false;
                                }else if(res.data.code === 2){
                                    this.$Message.info({
                                        content:res.data.message,
                                        duration:3,
                                    })
                                    this.templateId = ''
                                    this.modal.show = false;
                                }else {
                                    this.$Message.error({
                                        content:res.data.message,
                                        duration:3,
                                    })
                                }
                                this.cancelLoading()
                            })
                            .catch(err=>{
                                console.log(err)
                                this.cancelLoading()
                            })
                    }else {
                        // this.$Message.error('请完善信息！');
                        this.cancelLoading()
                    }
                })
            },
            cancelLoading(){
                this.modal.loading = false;
                setTimeout(() => {
                    this.modal.loading = true;
                })
            },
        }
    }
</script>
<style scoped>

</style>
